<template>
  <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="top">
        <div v-for="(item, index) in list" :key="index" class="fader">
          <div class="pptsize">
            {{ index + 1 + "/" + list.length }}
          </div>
          <div class="pptlistsad">
            <div class="pptilstimgindex">
              <el-button
                :class="index === nums ? 'el-button--mediumsa' : ''"
                slot="reference"
                size="medium"
                @click="add(item.img, index, list.length)"
              >
                <el-image :src="url + item.img" class="imges">
                  <div slonot="placeholder" class="image-slot">
                    加载中
                    <div class="loader"></div>
                  </div>
                </el-image>
                <div v-if="item.video" class="isvideo">视频</div>
                <div class="imgesbutton">
                  <div class="buttondivs">
                    <el-tooltip
                      class="item"
                      effect="light"
                      placement="top"
                      :enterable="false"
                      content="复制此页"
                    >
                      <el-button
                        type="primary"
                        plain
                        @click.stop="pptcopy(index, item.videoid)"
                        icon="el-icon-document-copy"
                        circle
                      ></el-button>
                    </el-tooltip>
                  </div>
                  <div class="buttondivs">
                    <el-upload
                      class="upload-demo"
                      :action="url + 'virtual/v1/userPro/resUpload'"
                      :show-file-list="false"
                      :data="obj"
                      name="resource"
                      accept=".mp4"
                      :on-success="success"
                      :before-upload="beforeupload"
                    >
                      <!-- 添加视频 -->
                      <el-tooltip
                        class="item"
                        effect="light"
                        placement="top"
                        :enterable="false"
                        content="插入视频"
                      >
                        <el-button
                          style="z-index: index 999"
                          plain
                          icon="el-icon-plus"
                          type="primary"
                          circle
                          @click="pptvideo(index)"
                        ></el-button>
                      </el-tooltip>
                    </el-upload>
                  </div>
                  <!-- 删除此页 -->
                  <div class="buttondivs">
                    <el-tooltip
                      class="item"
                      effect="light"
                      placement="top"
                      :enterable="false"
                      content="删除此页"
                    >
                      <el-button
                        plain
                        circle
                        type="danger"
                        @click.stop="pptdel(index, item.videoid, list.length)"
                        icon="el-icon-delete-solid"
                      ></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </el-button>
            </div>
            <div class="addvideos">
              <div class="addvideosa" v-if="item.video">
                <div class="buttondivs" v-if="item.isSound === 1">
                  <el-button
                    type="primary"
                    plain
                    @click="pptvideomute(index)"
                    icon="el-icon-turn-off-microphone"
                    >视频静音</el-button
                  >
                </div>
                <div class="buttondivs" v-else>
                  <el-button
                    type="primary"
                    plain
                    @click="pptvideomzk(index)"
                    icon="el-icon-microphone"
                    >开启声音</el-button
                  >
                </div>
                <div class="buttondivs">
                  <el-button
                    plain
                    type="danger"
                    @click="pptvideodel(index, item.video, item.videoid)"
                    icon="el-icon-delete-solid"
                    >删除视频</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pptoness" v-show="ispptsnone">
          <div class="pptnone">无 需 PPT</div>
        </div>
      </div>
      <el-dialog title="ppt选择" :visible.sync="dialogVisibles" width="50%">
        <div class="imageblocktop">
          <div v-for="item in lists" :key="item.id" class="imageblock">
            <el-button @click="pptimg(item.uuidStr)">
              <el-image
                lazy
                :src="url + item.basePath + item.uuidStr + '/images/1.png'"
              >
                <div slot="placeholder" class="image-slot">
                  加载中
                  <div class="loader"></div></div
              ></el-image>
            </el-button>
            <br />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </el-dialog>
    </div>
  </el-scrollbar>
</template>

<script>
import { pptinfo } from "@/api/virtualhuman";
// import Recorder from "js-audio-recorder";
// const recorder = new Recorder({
//   sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
//   sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
//   numChannels: 1, // 声道，支持 1 或 2， 默认是1
// // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
// });
export default {
  name: "PPT",
  props: {
    lists: {
      typr: Array,
      required: true,
    },
    pptinfoid: {
      type: String,
      required: true,
    },
    pptinfoIds: {
      type: Number,
      default: 0,
    },
    isppt: {
      type: Boolean,
      required: true,
    },
    nums: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      obj: {
        pptSort: this.pptvideoindex,
        projectId: this.$route.query.videoid,
      }, //文件上传附带的参数
      dialogVisibles: false,
      url: this.$store.getters["url/urls"],
      arr: [],
      list: [],
      basePath: "",
      uuidStr: "",
      pptvideoindex: 0,
      ispptsnone: false,
    };
  },
  watch: {
    pptinfoid(val) {
      if (val != 0) {
        this.pptinfo();
      }
    },
    pptinfoIds() {
      //检测到有pptid就只回显不要刷新vuex
      this.pptinfos();
    },
    isppt(val) {
      if (val) {
        this.ispptsnone = true;
        this.list = [];
        this.$emit("pptemptas");
      }
    },
  },
  mounted() {
    // this.pptinfos()
  },
  updated() {},
  methods: {
    pptinfos() {
      this.list = this.$store.getters["virtualhuman/pptindex"];
    },
    pptinfo() {
      this.$emit("bgppt", true);
      pptinfo({ pptId: this.pptinfoid - 0, type: 2 }).then((res) => {
        if (res.code === 200) {
          this.basePath = res.data.basePath;
          this.uuidStr = res.data.uuidStr;
          this.$emit("imagemax", res.data);
          this.list = this.$store.getters["virtualhuman/pptindex"];
          this.$emit("bgppt", false);
          this.ispptsnone = false;
        } else {
          this.$emit("bgppt", false);
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    add(item, index) {
      this.$emit("indeximg", item, index);
    },
    pptimg(val) {
      //导出image
      this.$emit("pptimg", val);
      this.dialogVisibles = false;
    },
    pptcopy(val, videoid) {
      //复制ppt
      if (videoid === 0) {
        this.$store.commit("virtualhuman/PAGEADD", val);
        this.list = this.$store.getters["virtualhuman/pptindex"];
      } else {
        this.$message({
          message: "不可复制，因为ppt内有视频",
          type: "error",
        });
      }
    },
    //删除ppt
    pptdel(val, id, length) {
      this.$confirm("此操作将永久删除该页PPT, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.list.length <= 1) {
            this.$message({
              message: "不可删除，PPT最少需要一页",
              type: "warning",
            });
          } else {
            //有视频就得先删除视频去
            if (id) {
              let projectid = this.$store.getters("virtualhuman/pagesuuids");
              this.loading = true;
              this.$store
                .dispatch("virtualhuman/ppptvidelaxios", {
                  index: val,
                  id,
                  projectid,
                })
                .then((res) => {
                  this.$emit("pptupvideo");
                  this.loading = false;
                })
                .catch((res) => {
                  this.$message({
                    message: res,
                    type: "error",
                  });
                  this.loading = false;
                });
            }
            if (this.nums + 1 === length) {
              this.$emit("pptlength");
            }
            this.$store.commit("virtualhuman/PAGEDEL", val);
            this.list = this.$store.getters["virtualhuman/pptindex"];
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    pptvideo(index) {
      this.pptvideoindex = index;
      this.obj.pptSort = index + 1;
    },
    pptvideodel(index, path, id) {
      if (id) {
        this.loading = true;
        this.$store
          .dispatch("virtualhuman/ppptvidelaxios", {
            index,
            id,
            path,
            uuid: this.$route.query.videoid,
          })
          .then((res) => {
            // this.$message({
            //   message: res,
            //   type: "success",
            // });
            this.$emit("pptupvideo");
            this.loading = false;
          })
          .catch((res) => {
            this.$message({
              message: res,
              type: "error",
            });
            this.loading = false;
          });
      } else {
        this.$message.error("未上传视频");
      }
    },
    pptvideomute(index) {
      this.$store.commit("virtualhuman/VIDEOMUTE", index);
      this.pages = this.$store.getters["virtualhuman/pptindex"];
      this.$message.error("已禁用当前视频声音");
    },
    pptvideomzk(index) {
      this.$store.commit("virtualhuman/TURNONTHESOUND", index);
      this.pages = this.$store.getters["virtualhuman/pptindex"];
      this.$message.success("已开启当前视频声音");
    },
    beforeupload() {
      //上传前回调
      this.loading = true;
      return true;
    },
    success(response) {
      //上传成功回调
      if (response.code === 200) {
        this.$store.commit("virtualhuman/PPTPAGEVIDEO", {
          video: response.data.path,
          nums: this.pptvideoindex,
          videoid: response.data.resId,
        });
        this.loading = false;
        this.$emit("pptupvideo");
      } else {
        this.$message({
          message: response.msg,
          type: "error",
        });
        this.loading = false;
      }
    },
    addsvideoppt() {
      //录音
      // recorder.start().then(
      //   (res) => {
      //     console.log(res);
      //   },
      //   (error) => {
      //     console.log(`${error.name} : ${error.message}`);
      //   }
      // );
    },
    stopRecorder() {
      // recorder.stop();
    },
    playRecorder() {
      // recorder.stop();
      // const wavBlob = recorder.getWAVBlob(); // blob格式
      // const file = new window.File([wavBlob], "name.tts", { type: "tts" }); // 转成file类型
      // console.log(URL.createObjectURL(file));
      // this.$refs.videoss.src = URL.createObjectURL(file);
      // console.log(file);
      // recorder.play();
    },
  },
};
</script>
<style lang="scss" scoped>
.loader {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
}
.loader:before {
  animation: ball1 1s infinite;
  background-color: #cb2025;
  box-shadow: 30px 0 0 #f8b334;
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1s infinite;
  background-color: #00a096;
  box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
  }
  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #f8b334;
  }
  50% {
    box-shadow: 0 0 0 #f8b334;
    margin-bottom: 0;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #97bf0d;
  }
  50% {
    box-shadow: 0 0 0 #97bf0d;
    margin-top: -20px;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #97bf0d;
    margin-top: 0;
  }
}
</style>
<style lang="scss" scoped>
.top {
  // position: relative;
  box-shadow: -2px 2px 2px 1px;
  background-color: #222222;
  margin-top: 5px;
  margin-right: 5px;
  width: 100%;
  overflow: auto;
  .pptoness {
    background-color: #333c44;
    .pptnone {
      width: 100%;
      height: 10%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(50deg);
      line-height: 100%;
      color: #5087c2;
      font-size: 48px;
      word-spacing: 15px;
      text-align: center;
    }
  }
  .ppttopbtn {
    width: 100%;
    margin-bottom: 5px;
  }
  .fader {
    margin: 5% auto 10%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .pptilstimgindex {
      width: 80%;
      height: 85%;
    }
    .pptilstimgindex > .el-button {
      padding: 0 0 !important;
      width: 100%;
      height: 100%;
    }
    .addvideos {
      width: 80%;
      height: 30%;
      padding-top: 6px;
      overflow: hidden;
    }
    .addvideosa {
      overflow: hidden;
      display: inline-flex;
      width: 100%;
      height: 100%;
    }
    &:hover .addvideosa {
      transition-property: all;
      transition-duration: 0.3s;
      display: inline-flex;
      justify-content: space-around;
      opacity: 1;
    }
    .addvideosa {
      width: 100%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
      .buttondivs {
        width: 48%;
        height: 100%;
        .el-button {
          width: 100%;
          height: 100%;
          font-size: 12px;
          padding: 0;
        }
      }
    }
    .pptsize {
      // float: left;
      // align-self: center;
      width: 30%;
      size: 12px;
      color: #fff;
    }
    .pptlistsad {
      width: 100%;
    }
    .imges {
      width: 100%;
      height: 100%;
    }
  }
}
.el-button--mediumsa {
  box-shadow: 0px 0px 4px 4px #66b1ff;
  transform: scale(1.05);
}
.el-button--medium {
  position: relative;
  overflow: hidden;
  .isvideo {
    font-size: 12px;
    position: absolute;
    top: 7%;
    left: -20%;
    width: 55%;
    transform: rotate(-40deg);
    border: 1px solid #fe880b;
    text-shadow: -2px 2px 2px #000;
    color: #fff;
    font-weight: 10%;
    text-align: center;
    background-color: #fe880b;
  }
  transition-property: all;
  transition-duration: 0.6s;
  &:hover .imgesbutton {
    opacity: 1;
  }
  &:hover {
    // border: 2px solid #66b1ff;
    box-shadow: 0px 0px 4px 4px #66b1ff;
    transform: scale(1.05);
  }
  .imgesbutton {
    transition-property: all;
    transition-duration: 0.6s;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 45%;
    bottom: 3%;
    display: flex;
    justify-content: space-between;
    // left: 50%;
    // top: 50%;
    // overflow: hidden;
    // margin: auto;
    // transform: translate(-50%, 30%);
    .buttondivs {
      width: 33%;
      height: 100%;
      overflow: hidden;
      // .el-button{
      //   width: 100%;
      //   height: 100%;
      // }
    }
  }
}
.imageblocktop {
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
  .imageblock {
    margin-right: 10px;
    width: 300px;
    height: 300px;
  }
}
</style>